<template>
    <div class='main'>
        <div class="cover_c">  
            <div class="cover">
                <img src="https://xxx.oss.com/dxdh/%E8%92%99%E7%89%88%E7%BB%84%201.png" alt="" style="width:100%;height:100%">
            </div>
        </div>
        <div class="content">
            <div class="title">{{contentData.title}}</div>
            <div class="date">{{contentData.date}}</div>
            <div class="line"></div>
            <div class="innertext">{{contentData.content}}</div>
            <div class="back" @click="()=>{this.$router.go(-1)}">返回上一页</div>
        </div>
    </div>
    
</template>
<script>
export default {
    data(){
        return{
            contentData:{}
        }
    },
    mounted(){
        this.contentData=JSON.parse(sessionStorage.textcontent)
        console.log(this.contentData.title);
    }
}

</script>
<style scoped>
.main{
    margin-bottom: 50px;
    position: relative;

}
.cover{
    position: absolute;
    top: -210px;
    z-index: 0;
    width: 1909px;
    height: 276px;
    /* text-align: center; */
    left: 50%;
    margin-left: -960px; 
    overflow: hidden;
}
.cover_c{
    position: relative;
    width: 100%;
}
.content{
    width: 1200px;
    min-height:700px;
    background-color: #fff;
    z-index: 1;
    position: relative;
    margin: 80px auto;
    margin-bottom: 24px;
    padding-top: 36px;
}
.title{
    height: 30px;
    /* margin-top: 28px; */
    padding-left: 39px;
    font-family: Noto Sans SC;
    font-size: 28px;
    text-align: left;
    
}
.date{
    height: 10px;
    margin-top: 20px;
    padding-left: 39px;
    font-family: Noto Sans SC;
    font-size: 13px;
    text-align: left;
}
.innertext{
    padding:15px 39px;
    font-family: Noto Sans SC;
    font-size: 20px;
    text-align: left;
    text-indent: 2em;
}
/* 渐变图片实现虚线间隔设置 */
.line{
    width: 1150px;
    margin: 30px auto;
    height: 1px;
    background-image: linear-gradient(to right, #33AAFF 0%, #33AAFF 50%, transparent 50%);
    background-size: 15px 1px;
    background-repeat: repeat-x;
}
.back{
    position: absolute;
    bottom: 30px;
    left: 39px;
    font-family: Noto Sans SC;
    font-size: 15px;
    color: #33AAFF;
    cursor: pointer;
}
</style>